import React, { Component } from 'react';
import { NavBar,List ,Popup} from 'antd-mobile'
import {getCity} from "../../api"


class Index extends Component {
    state={
        city:[],
        visible:false,
        children:[]
    }
    async getCityAndSet(){
        const resp=await getCity()
        console.log(resp)
        this.setState({
            city:resp.data.data
        })
    }
    componentDidMount(){
        this.getCityAndSet()
    }
    openCity(i){
        console.log(i)
        const {visible,city}=this.state
        this.setState({visible:!visible})
        let child=city[i].children
        this.setState({
            children:child
        })
    }
    chance(item){
        localStorage.setItem('city',JSON.stringify(item.name))
        this.setState({visible:false})
    }
    close(){
        const {visible}=this.state
        this.setState({visible:!visible})
    }
    back(){
        this.props.history.push('/home')
    }
    render() {
        const {city,visible,children}=this.state
        return (
            <div>
                <NavBar onBack={()=>this.back()}>城市选择</NavBar>
                {
                    city.length>0&&city.map((v,i)=>{
                        return(
                            <List key={v.id}>
                                <List.Item  onClick={() =>this.openCity(i)}>{v.title}
                                </List.Item>
                            </List>
                        )
                    })
                    
                }
                <Popup
                    visible={visible}
                    // eslint-disable-next-line react/no-direct-mutation-state
                    onMaskClick={() =>this.close()}
                    position='right'
                    bodyStyle={{ minWidth: '60vw' }}
                        >
                    {
                        children.map((item,index)=>{
                            return(
                                <List key={item.id}>
                                <List.Item onClick={()=>this.chance(item)}>{item.name}</List.Item>
                                </List>
                            )
                        })
                    }
                </Popup>
            </div>
        );
    }
}

export default Index;
